<template>
	<div class="setting-page mx-auto px-3">
		<div class="mt-28"></div>
		<div class="user-info-card-container shadow hover:shadow-lg rounded-md overflow-hidden">
			<user-info-card />
		</div>
		<div
			class="setting-collect shadow hover:shadow-lg rounded-md overflow-hidden bg-white mt-3 px-5 pb-5 pt-1">
			<el-tabs v-model="activeTag">
				<el-tab-pane label="设置" name="setting">
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer px-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="material-symbols:dark-mode-outline" :size="18" />
							</div>
							<span>深色模式</span>
						</div>
						<div class="control">
							<el-switch v-model="isDark" />
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer px-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="mdi:link-variant" :size="18" />
							</div>
							<span>首页显示快速链接</span>
						</div>
						<div class="control">
							<el-switch v-model="isDark" />
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer px-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="material-symbols:calendar-clock-outline" :size="18" />
							</div>
							<span>显示日期时间</span>
						</div>
						<div class="control">
							<el-switch v-model="isDark" />
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer pl-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="ic:outline-photo-size-select-actual" :size="17" />
							</div>
							<span>设置背景图片</span>
						</div>
						<div class="control">
							<div
								class="edit px-5 border mx-1 py-1 text-xs cursor-pointer border-gray-300 flex items-center text-gray-700 hover:border-[#409EFF] hover:text-[#409EFF]">
								<icon name="material-symbols:edit-square-outline" :size="16" />
								<span class="ml-1">设置</span>
							</div>
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer pl-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="ic:baseline-apps" :size="20" />
							</div>
							<span>首页显示热门推荐</span>
						</div>
						<div class="control">
							<el-switch v-model="isDark" />
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer pl-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="devicon:reactnavigation" :size="17" />
							</div>
							<span>显示 Logo</span>
						</div>
						<div class="control">
							<el-switch v-model="isDark" />
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer pl-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="material-symbols:screen-search-desktop-outline-rounded" :size="19" />
							</div>
							<span>默认搜索引擎</span>
						</div>
						<div class="control flex items-center">
							<el-select
								size="small"
								v-model="value"
								style="width: 100px"
								placeholder="选择默认搜索引擎">
								<el-option
									v-for="item in options"
									:key="item.value"
									:label="item.label"
									:value="item.value" />
							</el-select>
						</div>
					</div>
					<div
						class="setting-item h-12 text-sm flex items-center justify-between text-gray-700 border-b py-2 cursor-pointer pl-2">
						<div class="name flex items-center">
							<div class="icon w-9 flex items-center justify-center">
								<icon name="ix:about" :size="20" />
							</div>
							<span>关于</span>
						</div>
						<div class="control flex items-center">
							<icon name="material-symbols-light:chevron-right-rounded" :size="26" />
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="收藏列表" name="collection">
					<el-row>
						<el-col class="p-2" :xs="24" :sm="8" :md="8" :lg="6" v-for="item in 10">
							<resource-card
								name="蓝云博客"
								:visit-count="1000"
								url="https://lanyunblog.com/"
								desc="一个分享技术、生活、感悟的博客"
								icon="https://lanyunblog.com/favicon.ico" />
						</el-col>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script name="SettingPage" lang="ts" setup>
const activeTag = ref('setting');
const isDark = ref(false);

const value = ref('internal');
const options = [
	{
		label: '站内',
		value: 'internal',
	},
	{
		label: '百度',
		value: 'baidu',
	},
	{
		value: 'bing',
		label: 'Bing',
	},
	{
		value: 'google',
		label: 'Google',
	},
];
</script>

<style lang="scss" scoped>
.setting-page {
	max-width: 880px;
}
</style>
